<template>
  <div
    class="invitation-wrp"
    :class="{
      visible: visible,
    }"
    @click="closeVisible"
  >
    <div
      class="invitation-modal"
      :class="{
        visible: visible,
      }"
      @click.stop
    >
      <div></div>
      <div class="img-wrp">
        <div class="bg-img bell"></div>
      </div>
      <div class="title">邀请返利20%</div>
      <div class="content">
        每邀请一名朋友并成为我们的会员，您将获得邀请佣金奖励(佣金比例20%)，若朋友在萌通加速消费100元，您则可获得返利20元。此返利可用于购买套餐或提现![快来和我们一起赚钱吧!]
      </div>

      <div class="button" @click="closeVisible">
        <span>OK</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "InvitationModal",
  data: () => ({
    visible: false,
  }),
  mounted() {
    setTimeout(() => {
      this.visible = true;
    }, 0);
  },
  methods:{
    closeVisible: function(){
      this.visible = false;
    }
  }
};
</script>

<style scoped>
.invitation-wrp {
  z-index: 19;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  visibility: hidden;
}
.invitation-wrp.visible {
  visibility: visible;
}
.invitation-wrp .invitation-modal {
  position: relative;
  top: 200vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  transition: ease-in-out 0.5s;
  height: calc(100vh - 50px);
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
}
.invitation-wrp .invitation-modal.visible {
  top: 20vh;
}
.invitation-wrp .invitation-modal > div:first-child {
  height: 5px;
  width: 50px;
  border-radius: 20px;
  background-color: #757575;
}
.invitation-wrp .invitation-modal div {
  margin-bottom: 30px;
}
.invitation-wrp .invitation-modal .img-wrp {
  height: 50px;
  width: 50px;
}
.bg-img.bell {
  background-image: url("../assets/imgs/bell.png");
}
.invitation-modal .title {
  font-size: 26px;
  font-weight: bold;
  color: #000;
}
.invitation-modal .content {
  font-size: 15px;
  color: #5e5e5e;
}

.button {
  position: absolute;
  bottom: 12.5vh;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 50px);
  height: 46px;
  line-height: 46px;
  background: #000;
  color: #ffffff;
  font-size: 18px;
  border-radius: 8px;
  text-align: center;
}
</style>